// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 引入css文件
import "./index.css"

// import img from './img/cat.jpg'

// JSX 仅仅是 createElement() 方法的语法糖(简化语法)
// JSX是语法被@bable/preset-react 插件编译为 createElement()方法
// React元素: 是一个对象,用来描述你希望在屏幕上看到的内容





class Left extends React.Component {
    render() {
        return (
            <div id='left' >
                <LeftNodeOne />
                <LeftNodeTwo />
                <button>点我({ })</button>
            </div>
        )
    }
}


class LeftNodeOne extends React.Component {
    render() {
        return (
            <div id='LeftNodeOne' >

            </div>
        )
    }
}

class LeftNodeTwo extends React.Component {
    render() {
        return (
            <div id='LeftNodeTwo' >

            </div>
        )
    }
}


class Rigth extends React.Component {
    render() {
        return (
            <div id='rigth' >
                <RigthNodeOne />
                <RigthNodeTwo />
                <button>点我({ })</button>
            </div>
        )
    }
}



class RigthNodeOne extends React.Component {
    render() {
        return (
            <div id='RigthNodeOne' >

            </div>
        )
    }
}

class RigthNodeTwo extends React.Component {
    render() {
        return (
            <div id='RigthNodeTwo' >

            </div>
        )
    }
}




class Main extends React.Component {
    render() {
        return (
            <div id='main'>
                <Left />
                <Rigth />
            </div>
        )
    }
}


class App extends React.Component {
    render() {
        return (
            <div>
                <Main />
            </div>
        )
    }
}

//3 渲染react元素
ReactDOM.render(
    <App />,
    document.getElementById('root'))
